<template>
  <div class="amountStatistics-root">
    <div class="charts-top">
      <gdAreaSelectVue
        class="gdAreaSelect"
        ref="gdAreaSelect"
        v-model="areaCodeAll"
        @changeGdArea="changeGdArea"
      />
      <el-radio-group v-model="radioVal" class="tab-li radio">
        <el-radio-button label="1">本月</el-radio-button>
        <el-radio-button label="2">本季</el-radio-button>
        <el-radio-button label="3">本年</el-radio-button>
      </el-radio-group>
      <el-date-picker
        class="tab-li"
        v-model="timeRange"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </div>
    <myBar domId="amountStatisticsCharts" :chartsData="chartsData" :myOption="myOption"/>
    <!-- <el-table
      :data="tableData"
      class="table"
      height="30vh"
      border
      style="width: 100%">
      <el-table-column
        prop="dateStr"
        label="日期">
      </el-table-column>
      <el-table-column
        prop="dateStr"
        label="咨询数">
      </el-table-column>
    </el-table> -->

    <div class="table">
      <v-table
        :table-columns="tableColumns"
        :table-data="tableData"
        :loading="loading"
        :is-index="true"
        title="便民便企统计数据"
        :needComputedHeight="false"
        height="300px"
        ref="table">
        <template #topButtonList>
            <ButtonForm :buttonList="buttonList" @clickButton="clickButton"></ButtonForm>
        </template>
      </v-table>
    </div>
  </div>
</template>

<script>
import gdAreaSelectVue from '@/components/GdAreaSelect/GdAreaSelect.vue'
import myBar from '@/components/Echarts/myBar.vue'
import VTable from '@/components/VTable'
import ButtonForm from '@/components/ButtonForm/index'
import {
  peopleApplyDateCountStatistics,
  peopleApplyDateCountStatisticsExport,
} from "@/api/risk/publicPeopleApply";

export default {
  name: "amountStatistics",
  components: {
    gdAreaSelectVue,myBar,VTable,ButtonForm,
  },
  data() {
    return {
      radioVal: "",
      timeRange: [],
      areaCodeAll:[],
      searchForm: {
        dateType:"03", //X轴维度 01：年，02：月，03：天，04：时，05：分，06：秒
        endTime:"",
        startTime:"",
        provinceCode:"",
        cityCode:"",
        countyCode:"",
        placeType:"",
        areaCode:""
      },
      chartsData:{
        xData: [],
      },
      myOption:{
        xAxis: {
          // boundaryGap: false,
        },
      },
      tableColumns:[
        {
          prop: 'dateStr',
          label: '日期',
        },
        {
          prop: 'dealingTotal',
          label: '处理中',
        },
        {
          prop: 'finishTotal',
          label: '办结',
        },
        {
          prop: 'total',
          label: '事项总数',
        }

      ],
      tableData: [],
      loading: false,
      buttonList:[
        // {name:'导出',methods:'handleExport'}
        {name:'导出数据',methods:'handleExport', type:'primary'}
      ],
    };
  },
  watch: {
    radioVal: {

      handler(newVal, oldVal) {
        this.searchForm.areaCode =this.$store.state.account.user.deptIds;
        if(newVal == 1){
          // 本月
          this.searchForm.startTime = this.$dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss')
          this.searchForm.endTime = this.$dayjs().endOf('month').format('YYYY-MM-DD HH:mm:ss')
          this.searchForm.dateType = "03";
          // this.searchForm.dateParam= '20'
        }else if(newVal == 2){
          // 本季
          this.searchForm.startTime = this.$dayjs().startOf("quarter").format('YYYY-MM-DD HH:mm:ss')
          this.searchForm.endTime = this.$dayjs().endOf('quarter').format('YYYY-MM-DD HH:mm:ss')
          // this.searchForm.dateParam= '30'
          this.searchForm.dateType = "02";
        }else if(newVal == 3){
          // 本年
          this.searchForm.startTime = this.$dayjs().startOf('year').format('YYYY-MM-DD HH:mm:ss')
          this.searchForm.endTime = this.$dayjs().endOf('year').format('YYYY-MM-DD HH:mm:ss')
          // this.searchForm.dateParam= '30'
          this.searchForm.dateType = "02";
        }
        this.getData();
      },
    },
    timeRange: {
      handler(newVal, oldVal) {
        // console.log('timeRange',newVal)
        if(!newVal){
          if(this.radioVal == 1){
            // 本月
            this.searchForm.startTime = this.$dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss')
            this.searchForm.endTime = this.$dayjs().endOf('month').format('YYYY-MM-DD HH:mm:ss')
            this.searchForm.dateType = "03";
          }else if(this.radioVal == 2){
            // 本季
            this.searchForm.startTime = this.$dayjs().startOf("quarter").format('YYYY-MM-DD HH:mm:ss')
            this.searchForm.endTime = this.$dayjs().endOf('quarter').format('YYYY-MM-DD HH:mm:ss')
            this.searchForm.dateType = "02";
          }else if(this.radioVal == 3){
            // 本年
            this.searchForm.startTime = this.$dayjs().startOf('year').format('YYYY-MM-DD HH:mm:ss')
            this.searchForm.endTime = this.$dayjs().endOf('year').format('YYYY-MM-DD HH:mm:ss')
            this.searchForm.dateType = "02";
          }
        }else{
          this.searchForm.startTime = newVal[0]
          this.searchForm.endTime = newVal[1]
        }
        this.getData();
      },
    },
    areaCodeAll: {
      handler(newVal, oldVal) {
        this.searchForm.provinceCode = newVal[0]
        this.searchForm.cityCode = newVal[1]
        this.searchForm.countyCode = newVal[2]

        this.getData();
      },
    },
  },
  methods: {
    changeGdArea(item) {

    },
    getData(){
      // console.log(this.searchForm)
      this.loading = true

      // 按短路逻辑给areaCode赋值，优先级：县>市>省>当前登录用户所属区域
      let areaCode = this.searchForm.countyCode.slice(0,6) || this.searchForm.cityCode.slice(0,4) || this.searchForm.provinceCode.slice(0,2) || this.$store.state.account.user.deptIds || ''
      this.searchForm.areaCode = areaCode

      peopleApplyDateCountStatistics(this.searchForm).then((res) => {
        this.chartsData.xData = res.data.dateStr
        this.chartsData.yData = res.data.data.map(item=>{
          return item
        })
        this.tableData = res.data.tableList
        this.loading = false
        // this.draw(res.data);
      });
    },
    // 触发按钮区域按钮方法
    clickButton(methods){
      this[methods]()
    },
    handleExport(){
      peopleApplyDateCountStatisticsExport(this.searchForm,`便民便企统计数据_${new Date().getTime()}.xlsx`);
    },
  },
  mounted() {
    // day.js季度时间获取插件
    var quarterOfYear = require('dayjs/plugin/quarterOfYear')
    this.$dayjs.extend(quarterOfYear)

    this.radioVal = "1"
    // this.getData()
  },
};
</script>

<style lang="scss" scoped>
.amountStatistics-root {
  .charts-top{
    display: flex;
    justify-content: right;
    .gdAreaSelect{

    }
    .tab-li{
      margin-left: 20px;
    }
  }
  .table{
    margin-top: 10px;
    padding: 10px;
  }
}
</style>
